<template>
  <div class="alarm-icon-main">
    <span 
      :class="hasHighRiskData ? 'permission_icon alarm-style' : 'permission_icon'" 
      @click="redirectAlarmPage"
    >
      <img src="../../assets/images/permission-icon.png">
      <span 
        class="alarmFlag" 
        v-if="hasHighRiskData" 
        :style="{
          width: count> 100 ? (count+'').length * 10 + 'px' : '22px',
          right: count> 10 ? -(count+'').length * 5 + 'px' : '-10px'}"
        >
        {{count}}
      </span>
    </span>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  data(){
    return {
      highRiskData: [],
      hasHighRiskData: false,
      alarmName: ['资源告罄','异常行为','危险操作'],
      count: 0,
    }
  },
  methods: {
    //获取紧急告警数据
    getData() {
      let now = moment(new Date());
      let startTime = now.format('YYYY-MM-DD 00:00:00');
      let endTime = now.format('YYYY-MM-DD 23:59:59');
      let query = `last_operate_time=["${startTime}", "${endTime}"]&level=1&state=1`;
      this.$url.get(`/trace/alarm?${query}`)
      .then(res=>{
        this.highRiskData = res.data.data.data_list;
        if(this.highRiskData.length > 0){
          this.hasHighRiskData = true;
          this.count = res.data.data.count;
        }

      })
    },
    redirectAlarmPage() {
      if(this.hasHighRiskData){
        this.$router.push({
          name:'告警列表',
          params: {showHighRiskData:true},
        })
      }else {
        this.$router.push('/Alarm');
      }
    }
  },
  created() {
    this.getData();
  },
}
</script>

<style lang="less">
.alarm-icon-main{
  display: inline-block;
  .permission_icon {
    display: inline-block;
    position: relative;
    height: 40px;
    width: 40px;
    border: 1px solid #e6e6e6;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    img {
      width: 18px;
      height: 18px;
      padding-top: 10px;
    }
    .alarmFlag {
      position: absolute;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: normal;
      transform: scale(0.8);
      color: #fff;
      top: -10px;
      display: block;
      height: 22px;
      line-height: 22px;
      border-radius: 10px;
      background-color: red;
    }
  }
  .alarm-style {
    border-color: red !important;
    box-shadow: 0 0 4px 0 rgba(218, 0, 0, 0.3);
  }
}
</style>